<template>
  <div>
    <h1>【aty-color-picker】 component demo</h1>
    <p>【aty-color-picker】 本质</p>
    <aty-row class="fd-color-picker-box">
      <aty-row>
        <aty-title level="4">1.【aty-color-picker】 基础</aty-title>
        <aty-panel>基本用法，可以使用 v-model 实现数据的双向绑定。</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-text text="有默认值"/>
            <aty-color-picker v-model="color1"/>
          </aty-col>
          <aty-col span="8">
            <aty-text text="无默认值"/>
            <aty-color-picker v-model="color2"/>
          </aty-col>
        </aty-row>
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-color-picker】 透明度</aty-title>
        <aty-panel>开启属性 alpha，可以选择带 Alpha 通道的颜色。</aty-panel>
        <aty-color-picker v-model="color3" alpha/>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-color-picker】 色彩</aty-title>
        <aty-panel>设置属性 hue 为 false，可以禁用色彩选项。</aty-panel>
        <aty-color-picker v-model="color4" :hue="false"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-color-picker】 禁用</aty-title>
        <aty-panel>设置属性 disabled 为 true，可以禁用color-picker。</aty-panel>
        <aty-color-picker v-model="color4" :disabled="true"/>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-color-picker】 颜色预设</aty-title>
        <aty-panel>开启属性 recommend 可以显示推荐的颜色预设，或设置属性 colors 来自定义预设颜色。</aty-panel>
        <aty-row>
          <aty-col span="8">
            <aty-text text="使用默认推荐色"/>
            <aty-color-picker v-model="color5" recommend/>
          </aty-col>
          <aty-col span="8">
            <aty-text text="自定义推荐颜色"/>
            <aty-color-picker v-model="color6" :colors="colors"/>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-color-picker】 位置</aty-title>
        <aty-panel>通过 placement 可以设置颜色选择器的位置 placement 的值可以是top, top-start, top-end, bottom, bottom-start,
          bottom-end, left, left-start, left-end, right, right-start, right-end
        </aty-panel>
        <aty-row>
          <aty-col span="6">
            <aty-text with="20px" height="30px">top</aty-text>
            <aty-color-picker placement="top"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">bottom</aty-text>
            <aty-color-picker placement="bottom"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">left</aty-text>
            <aty-color-picker placement="left"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">right</aty-text>
            <aty-color-picker placement="right"></aty-color-picker>
          </aty-col>
        </aty-row>
        <aty-row>
          <aty-col span="6">
            <aty-text with="20px" height="30px">top-start</aty-text>
            <aty-color-picker placement="top-start"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">bottom-start</aty-text>
            <aty-color-picker placement="bottom-start"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">left-start</aty-text>
            <aty-color-picker placement="left-start"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">right-start</aty-text>
            <aty-color-picker placement="right-start"></aty-color-picker>
          </aty-col>

        </aty-row>
        <aty-row>
          <aty-col span="6">
            <aty-text with="20px" height="30px">top-end</aty-text>
            <aty-color-picker placement="top-end"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">bottom-end</aty-text>
            <aty-color-picker placement="bottom-end"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">left-end</aty-text>
            <aty-color-picker placement="left-end"></aty-color-picker>
          </aty-col>
          <aty-col span="6">
            <aty-text with="20px" height="30px">right-end</aty-text>
            <aty-color-picker placement="right-end"></aty-color-picker>
          </aty-col>
        </aty-row>
      </aty-row>
      <aty-row>
        <aty-title level="4">7.【aty-color-picker】 事件</aty-title>
        <aty-color-picker v-model="color8" :name="'colorpicker'" @input="input" @change="change"
                          @active-change="activeChange"/>
      </aty-row>
      <aty-row>
        <aty-title level="4">8.【aty-color-picker】 颜色格式</aty-title>
        <aty-row>
          <aty-text>format为hsl  </aty-text>
          <aty-color-picker :value="colorValue1" :name="'formatColor1'" format="hsl" @change="change"
                            @active-change="activeChange" />
        </aty-row>
        <aty-row>
          <aty-text>format为hsv</aty-text>
          <aty-color-picker :value="colorValue2" :name="'formatColor2'" format="hsv" @change="change"
                            @active-change="activeChange" />
        </aty-row>
        <aty-row>
          <aty-text>format为hex</aty-text>
          <aty-color-picker :value="colorValue3" :name="'formatColor3'" format="hex" @change="change"
                            @active-change="activeChange" />
        </aty-row>
        <aty-row>
          <aty-text>format为rgb</aty-text>
          <aty-color-picker :value="colorValue4" :name="'formatColor4'" format="rgb" @change="change"
                            @active-change="activeChange" />
        </aty-row>
      </aty-row>

    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      color1: '#19be6b',
      color2: '',
      color3: 'rgba(25, 190,107, .5)',
      color4: 'red',
      color5: 'blue',
      color6: '#ff6600',
      color8: 'red',
      colors: ['#311B92', '#512DA8', '#673AB7', '#9575CD', '#D1C4E9'],
      colorValue1: 'red',
      colorValue2: 'blue',
      colorValue3: 'green',
      colorValue4: 'black'
    }
  },
  methods: {
    activeChange: function (color, name) {
      Artery.message.info('当前方法：activeChange,color:' + color + ',name:' + name)
    },
    input: function (color, name) {
      Artery.message.info('当前方法：input,color:' + color + ',name:' + name)
    },
    change: function (color, name) {
      Artery.message.info('当前方法：change,color:' + color + ',name:' + name)
    }
  }

}
</script>
<style lang="less" type="text/less">
  .fd-color-picker-box {
    margin: 20px;
    text-align: left;
  }

  .fd-color-picker-box > .aty-row {
    margin-bottom: 20px;
  }
</style>
